<template>
  <div class="mainPage">
    <!--标题-->
    <header
      ref="header"
      :style="{
        paddingTop: statusBarHeight / 36 + 'rem',
        height: (statusBarHeight + 56) / 36 + 'rem',
      }"
    ></header>
    <!-- <NavBar :title="'HIFI智能音乐盒'"  :rightVisible="true"/> -->
    <!-- 图片 -->
    <DeviceLogo :deviceImg="deviceImg" :logoImg="logoImg" />
    <!-- 连接页面 -->
    <cardConnect />
    <!-- 模式选择 -->
    <div class="cardBox" :class="bleStatus !== 2 ? 'bg_card' : ''">
      <cardCont
        :title="'模式选择'"
        :imgPat="imgPat"
        :img_active="imgPatActive"
        :value="popList[this.modeSelection]"
        @handlerisShowPop="handlerisShowPop"
      />
      <cardCont
        :title="'音源选择'"
        :imgPat="sound"
        :value="popTowList[this.sourceSelection]"
        :img_active="soundActive"
        @handlerisShowPop="handlerisShowTow"
      />
    </div>
    <!-- 音效选择 -->
    <div class="cardBox" :class="bleStatus !== 2 ? 'bg_card' : ''">
      <cardCont
        :title="'音效选择'"
        :imgPat="ic_effect"
        :value="popTherrList[this.SoundChoice]"
        :img_active="effectActive"
        @handlerisShowPop="handlerisShowTherr"
      />
      <cardCont
        :title="'声场选择'"
        :imgPat="ic_stage"
        :value="soundFieldList[this.soundField]"
        :img_active="stageActive"
        @handlerisShowPop="handlerisShowfive"
      />
    </div>
    <!-- slider组件 -->
    <cardSlider
      :class="bleStatus !== 2 ? 'bg_card' : ''"
      :title="'音量'"
      :value="setMasterVolumedata"
      @handlerVal="handlerVolumeVal"
    />
    <cardSlider
      :class="bleStatus !== 2 ? 'bg_card' : ''"
      :title="'降噪'"
      :value="ValDenoise"
      :max="20"
      :min="0"
      :isShow="true"
      @handlerVal="handlerValDenoise"
    />
    <!-- :max="-60"
      :min="-80" -->
    <!-- EQ调节 -->
    <div class="cardBox" :class="bleStatus !== 2 ? 'bg_card' : ''">
      <cardCont
        :title="'EQ调节'"
        :imgPat="ic_eq_active"
        @handlerisShowPop="handlerEqAdjust"
      />
      <cardCont
        :title="'混音设置'"
        :imgPat="ic_overdub_active"
        @handlerisShowPop="handlerMixingSet"
      />
    </div>
    <!-- 声场调节 -->
    <div class="cardBox" :class="bleStatus !== 2 ? 'bg_card' : ''">
      <cardCont
        :title="'声场调节'"
        :imgPat="ic_regulation_active"
        @handlerisShowPop="handlersoundField"
      />
      <cardCont
        :title="'喇叭设置'"
        :imgPat="ic_trumpet_active"
        @handlerisShowPop="handlerSpeakerSetup"
      />
    </div>

    <!-- 弹框组件 -->
    <Popout
      class="pop"
      :isShowPop="isShowPop"
      :outList="popList"
      @handlerValue="handlerValuePop"
      :vuexNum="modeSelection"
    />
    <Popout
      class="popTow"
      :isShowPop="isShowTow"
      :outList="popTowList"
      @handlerValue="handlerValuePopTow"
      :vuexNum="sourceSelection"
    />
    <Popout
      class="popTherr"
      :isShowPop="isShowTherr"
      :outList="popTherrList"
      :heightVal="248"
      @handlerValue="handlerValuePopTherr"
      :vuexNum="SoundChoice"
    />
    <Popout
      class="popfive"
      :isShowPop="isShowfive"
      :outList="soundFieldList"
      @handlerValue="handlerValuePopFive"
      :vuexNum="soundField"
    />
    <connectionFail :connectionFail="connectionFail" />
  </div>
</template>

<script>
// import Ble from "./hilink/ble";
import BlueToothManage from "../hilink/BlueToothManage";

// import BleManage from "../hilink/BleManage";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import DeviceLogo from "../../components/DeviceLogo.vue";
import NavBar from "../../components/NavBar.vue";
import cardConnect from "../../components/cardConnect.vue";
import cardCont from "../../components/cardCont.vue";
import cardSlider from "../../components/cardSlider.vue";
import Popout from "../../components/Popout.vue";
import connectionFail from "../../components/connectionFail.vue";
export default {
  name: "bleDemo",
  components: {
    DeviceLogo,
    NavBar,
    cardConnect,
    cardCont,
    cardSlider,
    Popout,
    connectionFail,
  },
  data() {
    return {
      SliderVal: -70,
      consoleInfo: "",
      bleManage: null,
      deviceImg: require("../image/product_2FAN.png"),
      logoImg: require("../image/logo.png"),
      imgPat: "ic_pattern",
      imgPatActive: "ic_pattern_active",
      sound: "ic_sound",
      soundActive: "ic_sound_active",
      ic_effect: "ic_effect",
      effectActive: "ic_effect_active",
      ic_stage: "ic_stage",
      stageActive: "ic_stage_active",
      ic_eq_active: "ic_eq_active",
      ic_overdub_active: "ic_overdub_active",
      ic_regulation_active: "ic_regulation_active",
      ic_trumpet_active: "ic_trumpet_active",
      isShowPop: false,
      isShowTow: false,
      isShowTherr: false,
      isShowfive: false,
      // valuePat: "",
      valueSound: "",
      valueEffect: "",
      valueSoundField: "",
      popList: ["车载模式", "家用模式"],
      popTowList: ["原车音源", "HiCar音源", "AUX音源", "USB音源"],
      popTherrList: [
        "原音",
        "流行",
        "摇滚",
        "爵士",
        "古典",
        "经典小提琴",
        "梦幻",
        "节奏蓝调",
        "原声吉他",
        "背景声音",
        "低音增强",
        "低音减弱",
        "等响度",
        "重吉他",
        "金属",
        "无线电",
        "小鼓",
        "高音增强",
        "高音减弱",
        "人声",
        "自定义",
      ],
      soundFieldList: ["主驾模式", "副驾模式", "全车模式", "自定义模式"],
      connectionFail: false,
    };
  },
  created() {
    //  window.hilink && hilink.setTitleVisible(true)
  },
  mounted() {
    // window.hilink && hilink.setTitleVisible (false)
  },
  watch: {
    //监听数据方式1
    getDeviceInfo() {
      console.log(this.getDeviceInfo);
    },
    //监听数据方式2
    "$store.state.ble.deviceInfo": {
      deep: true,
      handler: function (newValue, oldValue) {
        console.log(newValue);
        console.log(oldValue);
      },
    },
    bleStatus(newValue) {
      console.log("++++++++++++++++++++;", newValue);
      if (newValue == 4) {
        // this.setMasterVolume(0);
        // this.setValDenoise(0);
      }
    },
  },
  computed: {
    ...mapState({
      modeSelection: (state) => state.ble.modeSelection,
      sourceSelection: (state) => state.ble.sourceSelection,
      SoundChoice: (state) => state.ble.SoundChoice,
      soundField: (state) => state.ble.soundField,
      setMasterVolumedata: (state) => state.ble.masterVolume,
      ValDenoise: (state) => state.ble.ValDenoise,
      bleStatus: (state) => state.ble.bleStatus,
    }),
    ...mapState(["isDarkMode", "statusBarHeight"]),
    ...mapGetters({
      getDeviceInfo: "ble/getDeviceInfo",
      getMasterVolume: "ble/getMasterVolume",
    }),
    // setMasterVolume(){
    //   console.log('计算属性',this.getMasterVolume);
    //   return this.getMasterVolume
    // },

    isDark() {
      // console.log("是否暗黑模式", this.isDark);
      // if (window.isDark) {
      //   return true;
      // } else {
      //   return false;
      // }
    },
  },
  created() {
    //BlueToothManage使用方式

    window.bleManage = new BlueToothManage();
    window.bleManage.init();
    console.log("是否暗黑模式", this.isDarkMode);
    // this.bleManage = new BleManage();
    // this.bleManage.init();
    let str = "f55f0603010" + 2;
    let data = str + this.checksum(str);
    console.log("蓝牙bleManage", window.bleManage);
    window.bleManage.send(data, (res) => {
      console.log(data);
      console.log(res);
    });

    // 上报数据初始化
    // this.handlerInit();
  },
  mounted() {},
  methods: {
    ...mapMutations("ble", ["setMasterVolume", "setValDenoise"]),
    handlerisShowPop() {
      this.isShowPop = !this.isShowPop;
      // console.log("弹框", this.isShowPop);
      this.isShowTow = this.isShowTherr = this.isShowfive = false;
    },
    handlerisShowTow() {
      this.isShowTow = !this.isShowTow;
      this.isShowPop = this.isShowTherr = this.isShowfive = false;
    },
    handlerisShowTherr() {
      this.isShowTherr = !this.isShowTherr;
      this.isShowPop = this.isShowTow = this.isShowfive = false;
    },
    handlerisShowfive() {
      this.isShowfive = !this.isShowfive;
      this.isShowPop = this.isShowTow = this.isShowTherr = false;
    },

    // 模式选择点击模式 弹框选中事件   处理下发事件
    handlerValuePop(index) {
      if (index == 0) {
        //  let str = `F05504000E10${this.modeSelection == 0 ? '01' : '02'}01` + this.$getCheckSum(`F05504000E10${this.modeSelection == 0 ? '01' : '02'}01`);
        let str = "F05504000E100101" + this.$getCheckSum("F05504000E100101");
        window.bleManage.send(str);
        // this.valuePat = this.popList[this.modeSelection];
        this.isShowPop = false;
      }
      if (index == 1) {
        let str = "F05504000E100201" + this.$getCheckSum("F05504000E100201");
        window.bleManage.send(str);
        this.isShowPop = false;
      }
    },
    // 音源选择点击模式 弹框选中事件   处理下发事件
    handlerValuePopTow(index) {
      switch (index) {
        case 0:
          let str = "F05503000DF500" + this.$getCheckSum("F05503000DF500");
          window.bleManage.send(str);
          this.isShowTow = false;
          break;
        case 1:
          let Hicar = "F05503000DF501" + this.$getCheckSum("F05503000DF501");
          window.bleManage.send(Hicar);
          this.isShowTow = false;
          break;
        case 2:
          let AUX = "F05503000DF502" + this.$getCheckSum("F05503000DF502");
          window.bleManage.send(AUX);
          this.isShowTow = false;
          break;
        case 3:
          let USB = "F05503000DF503" + this.$getCheckSum("F05503000DF503");
          window.bleManage.send(USB);
          this.isShowTow = false;
          break;
      }
    },
    // 音效选择点击模式 弹框选中事件   处理下发事件
    handlerValuePopTherr(index) {
      // if (index == this.SoundChoice) {
      //   this.valueEffect = this.popTherrList[index];
      // }
      switch (index) {
        case 0:
          let str = "F05503000D0D00" + this.$getCheckSum("F05503000D0D00");
          window.bleManage.send(str);
          this.isShowTherr = false;
          break;
        case 1:
          let str1 = "F05503000D0D01" + this.$getCheckSum("F05503000D0D01");
          window.bleManage.send(str1);
          this.isShowTherr = false;
          break;
        case 2:
          let str2 = "F05503000D0D02" + this.$getCheckSum("F05503000D0D02");
          window.bleManage.send(str2);
          this.isShowTherr = false;
          break;
        case 3:
          let str3 = "F05503000D0D03" + this.$getCheckSum("F05503000D0D03");
          window.bleManage.send(str3);
          this.isShowTherr = false;
          break;
        case 4:
          let str4 = "F05503000D0D04" + this.$getCheckSum("F05503000D0D04");
          window.bleManage.send(str4);
          this.isShowTherr = false;
          break;
        case 5:
          let str5 = "F05503000D0D05" + this.$getCheckSum("F05503000D0D05");
          window.bleManage.send(str5);
          this.isShowTherr = false;
          break;
        case 6:
          let str6 = "F05503000D0D06" + this.$getCheckSum("F05503000D0D06");
          window.bleManage.send(str6);
          this.isShowTherr = false;
          break;
        case 7:
          let str7 = "F05503000D0D07" + this.$getCheckSum("F05503000D0D07");
          window.bleManage.send(str7);
          this.isShowTherr = false;
          break;
        case 8:
          let str8 = "F05503000D0D08" + this.$getCheckSum("F05503000D0D08");
          window.bleManage.send(str8);
          this.isShowTherr = false;
          break;
        case 9:
          let str9 = "F05503000D0D09" + this.$getCheckSum("F05503000D0D09");
          window.bleManage.send(str9);
          this.isShowTherr = false;
          break;
        case 10:
          let str10 = "F05503000D0D0A" + this.$getCheckSum("F05503000D0D0A");
          window.bleManage.send(str10);
          this.isShowTherr = false;
          break;
        case 11:
          let str11 = "F05503000D0D0B" + this.$getCheckSum("F05503000D0D0B");
          window.bleManage.send(str11);
          this.isShowTherr = false;
          break;
        case 12:
          let str12 = "F05503000D0D0C" + this.$getCheckSum("F05503000D0D0C");
          window.bleManage.send(str12);
          this.isShowTherr = false;
          break;
        case 13:
          let str13 = "F05503000D0D0D" + this.$getCheckSum("F05503000D0D0D");
          window.bleManage.send(str13);
          this.isShowTherr = false;
          break;
        case 14:
          let str14 = "F05503000D0D0E" + this.$getCheckSum("F05503000D0D0E");
          window.bleManage.send(str14);
          this.isShowTherr = false;
          break;
        case 15:
          let str15 = "F05503000D0D0F" + this.$getCheckSum("F05503000D0D0F");
          window.bleManage.send(str15);
          this.isShowTherr = false;
          break;
        case 16:
          let str16 = "F05503000D0D10" + this.$getCheckSum("F05503000D0D10");
          window.bleManage.send(str16);
          this.isShowTherr = false;
          break;
        case 17:
          let str17 = "F05503000D0D11" + this.$getCheckSum("F05503000D0D11");
          window.bleManage.send(str17);
          this.isShowTherr = false;
          break;
        case 18:
          let str18 = "F05503000D0D12" + this.$getCheckSum("F05503000D0D12");
          window.bleManage.send(str18);
          this.isShowTherr = false;
          break;
        case 19:
          let str19 = "F05503000D0D13" + this.$getCheckSum("F05503000D0D13");
          window.bleManage.send(str19);
          this.isShowTherr = false;
          break;
        case 20:
          let str20 = "F05503000D0D14" + this.$getCheckSum("F05503000D0D14");
          window.bleManage.send(str20);
          this.isShowTherr = false;
          break;
      }
    },
    // 音场选择点击模式 弹框选中事件   处理下发事件
    handlerValuePopFive(index) {
      // console.log(index);
      switch (index) {
        case 0:
          let str =
            "F05505000DF2002828" + this.$getCheckSum("F05505000DF2002828");
          window.bleManage.send(str);
          this.isShowfive = false;
          break;
        case 1:
          let str1 =
            "F05505000DF2012828" + this.$getCheckSum("F05505000DF2012828");
          window.bleManage.send(str1);
          this.isShowfive = false;
          break;
        case 2:
          let str2 =
            "F05505000DF2022828" + this.$getCheckSum("F05505000DF2022828");
          window.bleManage.send(str2);
          this.isShowfive = false;
          break;
        case 3:
          let str3 =
            "F05505000DF2032828" + this.$getCheckSum("F05505000DF2032828");
          window.bleManage.send(str3);
          this.isShowfive = false;
          break;
      }
    },
    //总音量下发
    handlerVolumeVal(val) {
      let str = `F05503000DF4${val.toString(16).padStart(2, 0)}`;
      let data = str + this.$getCheckSum(str);
      window.bleManage.send(data);
      console.log("总音量下发", data);
    },
    // 降噪SliderVal事件
    handlerValDenoise(val) {
      // console.log(val);
      // this.SliderVal = val;
      let str =
        `F05503000DF7${val.toString(16).padStart(2, 0)}` +
        this.$getCheckSum(`F05503000DF7${val.toString(16).padStart(2, 0)}`);
      window.bleManage.send(str);
      console.log("降噪", str);
    },
    // 跳转EQ页面
    handlerEqAdjust() {
      // console.log('eq调节',this.$router);
      this.$router.push("/eqadjust");
    },
    // 跳转混音页面
    handlerMixingSet() {
      this.$router.push("/MixingSet");
    },
    // 跳转声场调节
    handlersoundField() {
      this.$router.push("/soundField");
    },
    //跳转喇叭设置
    handlerSpeakerSetup() {
      this.$router.push("/SpeakerSetup");
    },
    // 初始化数据
    // handlerInit() {
    //   this.isDark;
    //   this.valuePat = this.popList[this.modeSelection]; // 模式选择
    //   this.valueSound = this.popTowList[this.sourceSelection]; // 音源选择
    //   this.valueEffect = this.popTherrList[this.SoundChoice]; //音效选择
    //   this.valueSoundField = this.soundFieldList[this.soundField]; // 音场选择
    // },
    // sendData() {
    //   let data = "";
    //   this.bleManage.sendCommand(data, (res) => {
    //     this.consoleInfo = JSON.stringify(res);
    //   });
    // },
    //设置数据方式3
    ...mapActions({
      setDeviceInfo: "ble/setDeviceInfo",
    }),
    test() {
      //设置数据方式1
      this.$store.dispatch("ble/setDeviceInfo", 1);
      //设置数据方式2
      this.$store.commit("ble/setDeviceInfo", 1);
      //设置数据方式3
      this.setProductCode(1);
    },
    checksum(str) {
      let sum = 0;
      for (let i = 0; i < str.length; i += 2) {
        sum += parseInt("0x" + str.substr(i, 2));
      }
      let num = sum % 256;
      return num.toString(16);
    },
  },
};
</script>

<style lang="less">
.mainPage {
  position: relative;
  background: var(--bg);
  overflow: hidden;
  // height: 920px;
  .cardBox {
    display: flex;
    width: 100%;
    margin-top: 12px;
    &:nth-last-child(1) {
      margin-bottom: 14px;
    }
  }

  .pop {
    position: absolute;
    top: 345px;
    left: 13px;
  }
  .popTow {
    position: absolute;
    top: 249px;
    right: 13px;
  }
  .popTherr {
    position: absolute;
    top: 278px;
    left: 13px;
  }
  .popfive {
    position: absolute;
    top: 325px;
    right: 13px;
  }
  .bg_card {
    opacity: 0.38;
    pointer-events: none;
  }
}
</style>
